<template>
  <div class="">
    <!-- <div class="nytit">首页&gt;通知/督办</div> -->
    <el-button @click="$router.back(-1)"  size="mini">返回</el-button>
    <el-row style="padding-top: 10px">
      <el-col :span="24" style="padding:0 5px">
        <el-card>
          <div class="title"><em>诉求<i v-if="question_num>0" style="font-style:normal;font-size:14px;">&nbsp;&nbsp;&nbsp;(诉求编号{{question_num}})</i></em><span class="time">{{addtime}}</span></div>
          <div class="context">
            <h3>{{title}}</h3>
            <span class="tips">来源：{{company}}&nbsp;&nbsp;&nbsp;联系人：{{user}}&nbsp;&nbsp;&nbsp;联系电话：{{phone}}&nbsp;&nbsp;&nbsp;<i v-if="accepttime">受理时间：{{accepttime}}</i></span>
            <p v-html="content"></p>
         
            <ul v-if="fileList.length>0">
              <h3>附件</h3>
              <li v-for="(list,index) in fileList" :key="index">
                <a :href="httpHome+list.url" target="_blank">{{list.name}}</a>
              </li>

            </ul>
            <el-button round size="mini" class="marbtn" @click="answerLayer" v-if="uType == 2">解答</el-button>
            <el-button round size="mini" type="primary" class="marbtn" v-if="uType == 2">诉求打印</el-button>
          </div>
        </el-card>
        <!-- <el-card style="margin-top:50px;">
          <div class="title">解答<span class="time">2012-12-12</span></div>
          <div class="context">
            <p>00000</p>
            <el-button round size="mini" class="marbtn">提交</el-button>
          </div>


        </el-card> -->
        <el-card style="margin-top:50px;">
          <div class="title">
            受理部门：{{target}}
            <!-- <el-form :inline="true" :model="region" class="demo-form-inline">

              <el-form-item label="负责部门">
                <el-select placeholder="廊坊市科技局">
                  <el-option label="廊坊市科技局" value="shanghai"></el-option>
                  <el-option label="廊坊市科技局" value="beijing"></el-option>
                </el-select>
              </el-form-item>

            </el-form> -->
          </div>
          <div class="step context">
            <div class="el-steps el-steps--vertical">
              <div v-for="(item,index) in progress" class="el-step is-vertical" :key="index">
                <div class="el-step__head is-process">
                  <div class="el-step__line" style="margin-right: 0px;"><i class="el-step__line-inner" style="transition-delay: -150ms; border-width: 0px; height: 0%;"></i></div>
                  <div class="el-step__icon is-text">
                    <!---->
                    <div class="el-step__icon-inner"></div>
                  </div>
                </div>
                <div class="el-step__main" style="margin-bottom:10px;">
                  <div class="el-step__title is-process"><span v-if="item.aname">{{item.aname}}</span><span v-else>用户追问</span></div>

                  <div class="el-step__description is-process">
                    <h4>
                      <em v-if="item.type == 1" class="green"><i class="iconfont icon-zhengque green"></i>已流转</em>
                      <em v-else-if="item.type == 2" class="blue"><i class="iconfont icon-zhengque blue"></i>受理中</em>
                      <em v-else-if="item.type == 3" class="blue"><i class="iconfont icon-zhengque blue"></i>督办</em>
                      <em v-else-if="item.type == 0" class="red"><i class="iconfont icon-zhengque red"></i>追问</em>
                     
                      <span>{{item.addtime}}</span></h4>
                          {{item.content}}
                    <div v-if="item.children.length>0">
                      <hr style="border: 1px solid #E8E7E7;margin:5px 0;">
                      <span v-for="(list,index) in item.children" :key="index" style="display:block;">
                        {{list.answername}} : {{list.answer}}
                      </span>
                    </div>
                    <div>
                      <!-- <hr style="border: 1px solid #E8E7E7;margin:5px 0;"> -->
                      <ul v-if="item.sup_attach.length>0">
                        <h3 style="font-size:14px;">附件</h3>
                        <li v-for="(list,index) in item.sup_attach" :key="index">
                          <a :href="httpHome+list.url" target="_blank" :download="list.name">{{list.name}}</a>
                        </li>
                      </ul>
                    </div>
                  </div>

                </div>
              </div>

            </div>

          </div>
         
        </el-card>

      </el-col>


    </el-row>
   
    
  </div>
</template>

<script>
import actionurl from "@/assets/js/actionurl";
import config from "@/config.js";
import selectMenu from '@/components/selectMenu.vue'

export default {
  components: {},
  data() {
    return {
      moveTitle:'移交',
      dialogVisibleMove:false,
      overtime:'',
      isHide:false,
      movegname:'',
      httpHome: "",
      title: "",
      acceptDesc:'',
      ThisID:0,
      print:false,
      dialogTit: "追问解答",
      dialogCon: "追问解答",
      content: "",
      company: "",
      phone: "",
      target: "",
      accepttime: "",
      user: "",
      addtime: "",
      progress: [],
      progressFirst: "",
      progressFirstTime: "",
      answer: "",
      anID: "",
      fileList: [],
      dialogVisible: false,
      uType: 0,
      question_num: 0,
      fileList3:[],
      uploadFile:false,

      MsgGroup:[],
      sname: '市级部门',
        sname2: '县长热线',
        dynamicValidateForm: {
          domains: [],
          selectList: [{
            value: '',
            id: ''
          }]
        },
        options: [{
          value: '10',
          label: '测试部门',
          id: '11'
        }, {
          value: '100',
          label: '测试部门2',
          id: '110'
        }],
        dynamicValidateFormArea: {
          domains: [{
            value: '河北',
            id: '12'
          }],
          selectList: [{
            value: '',
            id: ''
          }]
        },
        optionsArea: [{
          value: '10',
          label: '安次区',
          id: '11'
        }, {
          value: '101',
          label: '安次区2',
          id: '111'
        }]
    };
  },
  components:{
    selectMenu
  },
  methods: {
    
    detailInfo() {
      var _this = this;
      actionurl.MseeageByQuestionNum(
        {
          question_num: _this.$route.params.id
        },
        function(re) {
          if (re.status == 1) {
            _this.title = re.data.message.title;
            _this.company = re.data.message.company;
            _this.user = re.data.message.user;
            _this.phone = re.data.message.phone;
            _this.accepttime = re.data.message.accepttime;
            _this.addtime = re.data.message.addtime;
            _this.target = re.data.message.target;
            _this.content = re.data.message.content;
            _this.progress = re.data.progress;
            // console.log(JSON.parse(re.data.message.attach));
            if (re.data.message.attach !== "") {
              _this.fileList = JSON.parse(re.data.message.attach);
            } else {
              _this.fileList = [];
            }
            _this.ThisID = re.data.message.id;
          } else {
            _this.$message(re.msg);
          }
        }
      );
    }
   
  },
  created() {
    this.detailInfo();

    this.httpHome = config.URLWEBHTTP;
    this.question_num = this.$route.params.id;
  }
};
</script>

<style lang="scss" scoped>
.context {
  padding: 0 30px 50px;

  h3 {
    margin-bottom: 13px;
    font-size: 20px;
    font-weight: normal;
  }

  p {
    font-size: 14px;
    line-height: 24px;
  }

  .tips {
    color: #999;
    font-size: 14px;
    display: inline-block;
    padding-bottom: 30px;
  }
}

.marbtn {
  margin-top: 30px;
}

.title {
  // justify-content: flex-start;
}

.step {
  min-height: 580px;
  padding-left: 30px;
}

.el-step__description {
  border: 1px solid #e8e7e7;
  display: inline-block;
  border-radius: 10px;
  padding: 15px;
  width: 440px;
  color: #999;

  h4 {
    font-size: 14px;
    color: #666;
    height: 22px;
    font-weight: normal;
    display: flex;
    align-items: center;
    // justify-content: space-between;
    margin-bottom: 15px;
    overflow: hidden;
    position: relative;

    em {
      display: flex;
      align-items: center;
    }

    span {
      position: absolute;
      right: 0;
      top: 0;
    }
  }
}

.el-step__title.is-process {
  color: #333;
  font-weight: normal;
}

.el-step__icon {
  // background: #999;
  width: 15px;
  height: 15px;
  position: absolute;
  top: 0;
}

.el-step.is-vertical .el-step__line {
  left: 7px;
}

.el-step__icon.is-text {
  border: none;
  background: #999;
}

.el-step:last-of-type .el-step__icon.is-text {
  background: #999;
}
.el-step:first-of-type .el-step__icon.is-text{
  background: green;
}
.el-step:last-of-type .el-step__description,
.el-step:last-of-type .el-step__main {
  padding-right: 15px;
}

.el-step__description {
  margin: 10px 0;
}

.el-steps {
  display: initial;
}

.el-step.is-vertical .el-step__title {
  line-height: 18px;
  // padding-bottom:
}

ul {
  padding-top: 20px;
  li {
    a {
      color: #333;
      font-size: 12px;
      line-height: 26px;
    }
  }
}
</style>
